<template>
    <div style="height: 100%; position: relative">
        <el-drawer
            title="物流修改"
            :visible.sync="show_dialog"
            direction="rtl"
            size="80%"
            custom-class="demo-drawer"
            ref="drawer"
            destroy-on-close
        >
            <div class="demo-drawer__content" ref="content">
                <el-form :model="form" ref="formRef" :rules="rules" label-width="110px">
                    <!-- <div class="infoTitle">礼品基本信息</div> -->
                    <el-form-item label="物流公司: "  prop="company_no">
                        <el-select
                            placeholder="请选择物流公司"
                            ref="brand_name_select"
                            v-model="form.company_no"
                            @change="handleCompanyChange"
                        >
                            <el-option
                                v-for="item in shipList"
                                :label="item.com"
                                :key="item.com"
                                :value="item.no"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="物流单号: " prop="point_shippingcode">
                        <el-input v-model="form.point_shippingcode" :maxlength="32"></el-input>
                    </el-form-item>
                    <el-form-item label="发货时间: ">
                        <el-date-picker
                            v-model="form.point_shippingtime"
                            type="date"
                            placeholder="选择日期"
                        ></el-date-picker>
                    </el-form-item>
                    <el-form-item label="描述: ">
                        <el-input type="textarea" v-model="form.point_shippingdesc"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div class="demo-drawer__footer">
                <el-button @click="cancelForm">取 消</el-button>
                <el-button
                    type="primary"
                    @click="handleClose"
                    :loading="loading"
                >{{ loading ? "提交中 ..." : "确 定" }}</el-button>
            </div>
        </el-drawer>
    </div>
</template>
<script>
import { dateFormatter, objScreen } from "@/common/js/util"
export default {
    props: ['dialog'],
    data() {
        return {
            loading: false,
            formLabelWidth: '80px',
            form: {

            },
            shipList: [],
            show_dialog: false,
            type: '',//1发货  其他修改
            rules: {
                company_no: [
                    { required: true, message: '请选择物流公司', trigger: 'change' }
                ],
                point_shippingcode: [
                    { required: true, message: '请填写物流单号', trigger: ['change', 'blur'] }
                ]
            },
        }
    },
    computed: {
    },
    created() {
        this.beforeData()
    },
    methods: {
        handleCompanyChange(val) {
            const e_prefix = this.shipList.find(item => item.no == val).e_prefix.toUpperCase()
            this.form.point_shippingcode = this.form.point_shippingcode.replace(/^([A-Z]+)/i, '') // 过滤头部字母
            if (e_prefix && !this.form.point_shippingcode.includes(e_prefix)) {
                this.form.point_shippingcode = e_prefix + this.form.point_shippingcode
            }
            // val = val.toUpperCase()
            // this.form.point_shippingcode = this.form.point_shippingcode.replace(/^(YT|SF)/i, '')
            // if (val === 'YT' || val === 'SF') {
            //     if (!this.form.point_shippingcode.includes(val)) {
            //         this.form.point_shippingcode = val + this.form.point_shippingcode
            //     }
            // }
        },
        show_dialog_fn(row, type) {
            this.form = {
                company_no: '',
                point_shippingcode: '',
                point_shippingtime: '',
                point_shippingdesc: '',
            }
            this.item_data = row;
            this.show_dialog = true;
            if (type) {
                this.type = type;//1发货
            }else{
				this.getShipDetail(row.point_orderid);
			}
        },
        cancelForm() {
            this.loading = false
            this.show_dialog = false
            clearTimeout(this.timer)
        },
        beforeData(id) {
            this.$http.get(`/admin/pointprod/index.php?act=pointOrder&op=shipList`).then(res => {
                if (res.code == 1) {
                    this.shipList = res.data
                } else {

                }

            }).catch(err => {
                this._message('error', err);
            })
        },
        getShipDetail(id) {
            this.$http('/admin/pointprod/index.php?act=pointOrder&op=getShipInfo', {
                params: {
                    order_id: id
                }
            }).then(res => {
                if (res.code === 1) {
                    this.form = res.data;
                    this.form.point_shippingtime = res.data.point_shippingtime * 1000
                }
            }).catch(err => {
                this._message('error', err);
            })
        },
        handleClose(done) {
            this.$refs.formRef.validate(valid => {
                if (valid) {
                    done = this.$refs.drawer.closeDrawer;
                    let point_shippingtime;
                    if (typeof this.form.point_shippingtime === "object") {
                        point_shippingtime = parseInt(this.form.point_shippingtime.getTime() / 1000);
                    } else {
                        point_shippingtime = parseInt(this.form.point_shippingtime / 1000);
                    }
                    let params = {
                        order_id: this.item_data.point_orderid,
                        point_shippingtime,
                        company_no: this.form.company_no,
                        point_shippingcode: this.form.point_shippingcode,
                        point_shippingdesc: this.form.point_shippingdesc
                    }
                    if (this.type === 1) {
                        params.type = 1;
                    }
                    this.$http('/admin/pointprod/index.php?act=pointOrder&op=updateShipInfo', {
                        params
                    }).then(res => {
                        if (res.code === 1) {
                            this._message('success', res.msg);
                            done();
                            this.form = {};
                        }
                    }).catch(err => {
                        this._message('error', err);
                    })
                }
            })
        }

    }
}
</script>

<style lang="scss" scoped>
.el-form {
    // width: 560px;
    padding-left: 10px;
}

.el-select /deep/ {
    .el-input {
        width: 360px;
    }
}
.el-textarea {
    width: 360px;
}

.plantTable /deep/.el-input {
    width: auto;
}
form /deep/.el-input {
    width: 360px;
}

.demo-drawer__content {
    position: absolute;
    top: 0;
    bottom: 60px;
    width: 100%;
    overflow-y: auto;
}

/deep/.el-drawer__body {
    position: absolute;
    top: 77px;
    bottom: 0;
    width: 100%;
    overflow: auto;
    padding-bottom: 60px;
}

.demo-drawer__footer {
    position: absolute;
    bottom: 10px;
    left: 20px;
}

.avatar-uploader /deep/.el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader /deep/.el-upload:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
.infoTitle {
    display: none;
    font-size: 14px;
    font-weight: 600;
    color: #5e728a;
    line-height: 50px;
    padding-left: 10px;
    background-color: #f3f5f8;
    margin-bottom: 10px;
}
</style>
